<template>
    <vo-table ref="yuTable" :data="data.tableData.data" :cols="data.tableData.cols" @fetch-data="filterData" @vue:mounted="filterData">
        <template #tableForm>
          <tiny-form :model="data.formData.formData"  :inline="true"  style="height: 40px;" label-width="100px"  ref="formRef">
            <tiny-form-item label="名称或编码" >
              <tiny-input v-model="data.info" placeholder="名称或编码"></tiny-input>
          </tiny-form-item>
          <tiny-form-item >
            <tiny-button type="info" @click="filterData"><vo-icon iconName="sousuo"/>搜索</tiny-button>
          </tiny-form-item>

        </tiny-form>
      </template>
      <template #leftBar>
        <tiny-button-group  v-slot:handleSlot="{row}">
          <tiny-button type="success" ghost @click="openDialog">新增</tiny-button>
          <tiny-button type="success" ghost @click="addDict">保存</tiny-button>
          <tiny-button type="danger" ghost @click="delBatch">删除</tiny-button>
        </tiny-button-group>
      </template>
      
      <template v-slot:handleSlot="{row}">
        <tiny-button-group class="ml-4" size="mini">
          <tiny-button size="mini" ghost type="success" @click="editBtn(row)">编辑</tiny-button>
          <tiny-button size="mini" ghost type="danger" @click="delRuleSet(row)">删除 </tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:isStopSlot="{row}">
        <tiny-switch v-model="row.isStop" true-value="0" false-value="1" @change="changeIsStop(row)" show-text>
        <template #open>
        <span>是</span>
      </template>
      <template #close>
        <span >否</span>
      </template>
      </tiny-switch>
      </template>

    </vo-table>
    <vo-dialog :data="data.dialogConfig" v-model:isShow="data.dialogConfig.isShow">
      <SysParamsEdit :editData="data.editData" v-model:isShow="data.dialogConfig.isShow" />
    </vo-dialog>
</template>

<script setup>
  import SysParamsEdit from './SysParamsEdit.vue';
  import {Modal, TinySwitch } from '@opentiny/vue';

  import {reactive, ref, getCurrentInstance, onBeforeMount} from 'vue';
  const {proxy} = getCurrentInstance();
  const yuTable = ref(null);
  const data = reactive({
    tableData:{data: [], cols: [],tableArrts: {}},
    dialogConfig: {width: '60%', title: '新增参数', isShow: false},
    editData: {},
    formData: {dictInfo: ''},
  })
  data.tableData.cols = [
    {type: 'selection'},
    {title: '参数编码', key: 'paramCode', align: 'left'},
    {title: '参数名称', key: 'paramName', align: 'left'},
    {title: '参数模块', key: 'sysMod', align: 'center'},
    {title: '参数设置', key: 'paramSet', align: 'center'},
    {
      title: '是否启用',
      key: 'isStop',
      tooltip: true,
      align: 'center',
      slot: 'isStopSlot',
      width: 100,
    },
    {title: '备注说明', key: 'remark',align: 'left',edit: {editor: true, type: 'input'}},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
  const filterData = async () => {
    let params = data.formData;
    var page = {page:yuTable.value.page()};
    params = Object.assign({}, params,page); 
    proxy.$api.system.querySysParams(params).then(res => {
      data.tableData.data = res;
    })
  }

  const openDialog = () => {
    data.dialogConfig.isShow = true;
  };

</script>
<style lang="scss" scoped>

</style>